<template>
    <div class="update-file-container flex-center-col-start">
        <div class="update-file-title flex-center">
            文件上传
        </div>
        <div class="flex-center">
            <label >指定路径:</label>  <input type="text"
                                          placeholder="输入包名,例如:/xx"
            style="outline: none;border: none;border-bottom: 1px solid gray;width: 300px;font-size: 18px;margin-left: 20px"
                                          v-model="obj.update.path"/>
            <el-button style="margin-left: 50px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </div>

        <div class="update-file-box">
            <el-upload
                    style="margin-top: 50px"
                    multiple="true"
                    class="upload-demo"
                    ref="updateFile"
                    name="files"
                    :data="{
                // 文件存储路径
                        path:obj.update.path
                    }"
                    action="/api/file/store"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :on-success="handleSuccess"
                    :file-list="obj.fileList"
                    :auto-upload="false">

                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button  style="margin-left: 50px;" size="small" type="warning" @click="clearFiles">清空</el-button>
                <div slot="tip" class="el-upload__tip">单体文件不超过1GB，总体不超过3GB</div>
            </el-upload>
        </div>

        <div class="updateFile-table-box">
            <table class="updateFile-table">
                <tr class="updateFile-table-head">
                    <td>文件名</td>
                    <td>URL</td>
                </tr>
                <tr v-for="item in obj.fileUrlList">
                    <td style="color: black;max-width: 200px;overflow-x: hidden">{{item.name}}</td>
                    <td style="color: #42b983;font-size: 18px;text-decoration: #2c3e50">{{item.url}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    import {reactive, ref} from "@vue/reactivity";
    import {errorMessage, successMessage} from "@/assets/js/utils";

    export default {
        name: "UpdateFile",
        setup(){
            let updateFile=ref()
            let obj=reactive({

                fileList: [],
                fileUrlList:[],
                update:{
                    path:"/image"
                }
            })


            let handleSuccess=(resp, file, fileList)=>{
                if(resp.code === 200){
                    successMessage("上传成功");
                    let resp=file.response
                    if(resp.code === 200){
                        obj.fileUrlList.push({
                            name:file.name,
                            url:resp.data[0]
                        })
                    }


                }else{
                    errorMessage("上传失败:"+resp.msg)
                }

            }
            let submitUpload=()=> {
                // 检查path是否正确
                if( obj.update.path.indexOf("/")===-1){

                    obj.update.path="/"+obj.update.path
                }
                updateFile.value.submit();
            }
            let handleRemove=(file, fileList) =>{
                console.log(file, fileList);
            }
            let handlePreview=(file)=> {
                console.log(file);
            }
            let clearFiles=()=>{
                updateFile.value.clearFiles()
            }
            return{
                obj,
                updateFile,
                submitUpload,
                handleRemove,
                handlePreview,
                handleSuccess,
                clearFiles
            }
        }
    }
</script>

<style scoped lang="less">
    .update-file-container{

        width: 100%;
        height: 100%;
        background-color: white;
        .update-file-title{
            width: 100%;
            height: 10%;
            font-size: 35px;
            color: black;
        }
        .update-file-box{
            width: 80%;
            min-height:10%;
            max-height: 12%;
            overflow-y: auto;
            border-top: 2px solid #42b983;
            border-bottom: 2px solid #42b983;
            margin-top: 30px;
        }
        .updateFile-table-box{
            width: 80%;
            overflow: auto;
            background: #647280;
            .updateFile-table{
                width: 90%;
                transition: all 0.5s;
                .updateFile-table-head{
                    height: 50px;

                    td{
                        font-size: 20px;
                        /*color: #028090;*/
                        color: black;
                    }
                }
                tr{
                    height: 60px;
                    transition: all 0.5s;

                }
            }
        }


    }
</style>